<template>
    <view class="container">
        <!-- 消息类型列表 -->
        <view class="message-types">
            <view class="type-item" @tap="navigateTo('/pages/message/system')">
                <view class="icon-wrapper system">
                    <image src="/static/images/message/system.png" mode="aspectFit"></image>
                </view>
                <view class="content">
                    <view class="title">
                        系统通知
                        <view v-if="unreadSystem > 0" class="badge">{{ unreadSystem }}</view>
                    </view>
                    <view class="desc">系统相关通知消息</view>
                </view>
                <view class="arrow"></view>
            </view>

            <view class="type-item" @tap="navigateTo('/pages/message/fault')">
                <view class="icon-wrapper fault">
                    <image src="/static/images/message/fault.png" mode="aspectFit"></image>
                </view>
                <view class="content">
                    <view class="title">
                        故障反馈
                        <view v-if="unreadFault > 0" class="badge">{{ unreadFault }}</view>
                    </view>
                    <view class="desc">设备故障处理进度通知</view>
                </view>
                <view class="arrow"></view>
            </view>

            <view class="type-item" @tap="navigateTo('/pages/message/order')">
                <view class="icon-wrapper order">
                    <image src="/static/images/message/order.png" mode="aspectFit"></image>
                </view>
                <view class="content">
                    <view class="title">
                        订单消息
                        <view v-if="unreadOrder > 0" class="badge">{{ unreadOrder }}</view>
                    </view>
                    <view class="desc">订单状态变更通知</view>
                </view>
                <view class="arrow"></view>
            </view>
        </view>
    </view>
</template>

<script>
import { getUnreadCount } from '@/api/message'

export default {
    data() {
        return {
            unreadSystem: 0,
            unreadFault: 0,
            unreadOrder: 0
        }
    },
    onShow() {
        this.getUnreadCount()
    },
    methods: {
        // 获取未读消息数
        async getUnreadCount() {
            try {
                const res = await getUnreadCount()
                this.unreadSystem = res.system
                this.unreadFault = res.fault
                this.unreadOrder = res.order
            } catch (error) {
                console.error('获取未读消息数失败', error)
            }
        },
        
        // 页面导航
        navigateTo(url) {
            uni.navigateTo({ url })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
    
    .message-types {
        background-color: #fff;
        border-radius: 12rpx;
        
        .type-item {
            display: flex;
            align-items: center;
            padding: 30rpx;
            position: relative;
            
            &:not(:last-child)::after {
                content: '';
                position: absolute;
                left: 30rpx;
                right: 30rpx;
                bottom: 0;
                height: 1rpx;
                background-color: #eee;
            }
            
            .icon-wrapper {
                width: 80rpx;
                height: 80rpx;
                border-radius: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 20rpx;
                
                &.system {
                    background-color: #e3f2fd;
                }
                
                &.fault {
                    background-color: #fbe9e7;
                }
                
                &.order {
                    background-color: #e8f5e9;
                }
                
                image {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            
            .content {
                flex: 1;
                
                .title {
                    font-size: 32rpx;
                    color: #333;
                    margin-bottom: 6rpx;
                    display: flex;
                    align-items: center;
                    
                    .badge {
                        background-color: #f44336;
                        color: #fff;
                        font-size: 24rpx;
                        padding: 0 12rpx;
                        height: 32rpx;
                        line-height: 32rpx;
                        border-radius: 16rpx;
                        margin-left: 12rpx;
                    }
                }
                
                .desc {
                    font-size: 26rpx;
                    color: #999;
                }
            }
            
            .arrow {
                width: 16rpx;
                height: 16rpx;
                border-top: 4rpx solid #ccc;
                border-right: 4rpx solid #ccc;
                transform: rotate(45deg);
            }
        }
    }
}
</style> 